<template>
    <div>

        <div class="left" @click="back">
            <van-icon name="arrow-left" />
        </div>
        <div class="right">
            <van-icon name="search" />
        </div>
        <div class="xgmm">
            <span class="xgmm-wz">修改密码</span>
        </div>

        <van-form>
            <van-field
                    v-model="oldwd"
                    type="password"
                    name="原始密码"
                    label="原始密码"
                    placeholder="请输入"
                    :rules="[{ required: true, message: '请输入' }]"
            />
            <van-field
                    v-model="newwd"
                    type="password"
                    name="新密码"
                    label="新密码"
                    placeholder="请输入"
                    :rules="[{ required: true, message: '请输入' }]"
            />
            <van-field
                    v-model="rpwd"
                    type="password"
                    name="重复密码"
                    label="重复密码"
                    placeholder="请输入"
                    :rules="[{ required: true, message: '请输入' }]"
            />
        </van-form>
<rpwdzj @comfirm="changewd"></rpwdzj>
</div>
</template>

<script>
    import rpwdzj from "@/components/rpwdzj";
    import Vue from 'vue';
    import { Form } from 'vant';
    import {getrpwd} from "@/api/rpwd";
    import { doLogin } from "@/api/login";

    export default {
        name: "rpwd",
        components:{
            rpwdzj
        },
        data() {
            return {
                rpwd:'',
                newwd:'',
                oldwd:''
            }
        },
        methods: {
            onSubmit(values) {
                console.log('submit', values)
            },
            back(){
                this.$router.go(-1)
            },
            changewd(){
                //验证密码是否为空
                if (this.oldwd!=''&& this.newwd !=''){
                    //验证密码是否一致
                    if(this.newwd != this.rpwd){
                        this.$toast('重复密码与新密码必须一致');
                        return;
                    }else {
                        let data={
                            password: this.oldwd,
                            newPassword:this.newwd,
                        }
                        const requestData = JSON.stringify(data)
                        getrpwd(requestData).then(res=>{

                            if(res){
                                this.$toast('修改密码成功,请重新登录');
                                //修改成功后清除登录的token
                                this.$cookies.set("Token", "", -1)
                                sessionStorage.clear();
                                this.$router.push("/login")
                            }
                        })
                    }
                }else {
                    this.$toast('密码不能为空');
                }
            }
            }

    }
</script>

<style>
    .xgmm-wz{
        display: flex;
        justify-content: center;
        font-size: 17px;
    }
    .xgmm{
        background-color: white;
        padding: 15px 0;
        border-bottom: 1px solid rgba(208, 209, 253, 0.19);

    }
    .right{
        position: absolute;
        padding: 15px 16px;
        position: absolute;
        font-size: 20px;
        color: #8aa3ef;
        right: 0;
    }
    .left{
        position: absolute;
        padding:16px;
    }
</style>